$(function() {
    var speedTime = 20; //时间
    var roadSpeed = 30; //px
    var carMoveSpeed = 30; //px
    var offsetTop1 = 0;
    var offsetTop2 = -772;
    var timer = null;


    var count = 0;
    var enemyBirth = 100;
    var enemySpeedTime = 10; //时间
    var enemyMoveSpeed = 30; //px
    var crash = 0;

    var score = 0;

    $("#startGame").on('click', function() {
        location.reload();
    });

    startGame();

    function startGame() {
        let container = $('#container');
        var car = $('#car');
        var yol1 = $("#yol1");
        var yol2 = $("#yol2");
        $('.over ').hide();
        $(document).on('keydown', function(e) {
            let key = e.keyCode;
            switch (key) {
                case 32:
                    start();
                    break;
                case 37:
                case 38:
                case 39:
                case 40:
                    carMove(key);
                    break;
            }
        });

        function start() {
            if (timer == null) {
                timer = setInterval(() => {
                    count++;

                    if (score >= 10) {
                        enemyMoveSpeed = 50;
                    }

                    if (score >= 20) {
                        enemyMoveSpeed = 70;
                    }

                    if (score >= 30) {
                        enemyMoveSpeed = 100;
                    }

                    if (count % enemyBirth == 0) {
                        newEnemy();
                    }
                    offsetTop1 += roadSpeed;
                    offsetTop2 += roadSpeed;
                    if (offsetTop1 >= 772) {
                        offsetTop1 = 0;
                    }
                    if (offsetTop2 >= 0) {
                        offsetTop2 = (-772);
                    }
                    console.log("offset1: " + offsetTop1);
                    console.log("offset2: " + offsetTop2);
                    yol1.css('top', offsetTop1 + "px");
                    yol2.css('top', offsetTop2 + "px");



                    let ground = document.getElementById("container");
                    let left = parseInt(car.css('left'));
                    let top = parseInt(car.css('top'));
                    let x = ground.offsetLeft + left + 26;
                    let y = ground.offsetTop + top;
                    let enemy = document.elementFromPoint(x, y);
                    if (enemy.classList.contains('enemy')) {
                        setTimeout(function() {
                            $('.over').show();
                        }, 1000)
                        crash = 1
                        clearInterval(timer);
                        car.css("left", left + 100 + "px");
                        car.css("top", top + 100 + "px");
                        car.css({ WebkitTransform: 'rotate(' + 1200 + 'deg)' });
                        car.css("transition", "all 2s ease-out")

                        enemy.style.left = left - 100 + "px";
                        enemy.style.top = top - 100 + "px";
                        enemy.style.WebkitTransform = "rotate(1200deg)";
                        enemy.style.transition = "all 2s ease-out";
                    }

                }, speedTime);
            }
        }

        function carMove(arrow) {
            if (arrow == 37) {
                let left = parseInt(car.css('left'));
                left -= carMoveSpeed;
                left = Math.max(84, left);
                car.css("left", left + "px");

                car.css({ WebkitTransform: 'rotate(' + (-10) + 'deg)' });
            }

            if (arrow == 38) {
                let top = parseInt(car.css('top'));
                top -= carMoveSpeed;
                top = Math.max(258, top);
                car.css("top", top + "px");

                car.css({ WebkitTransform: 'rotate(' + 0 + 'deg)' });
            }

            if (arrow == 39) {
                let left = parseInt(car.css('left'));
                left += carMoveSpeed;
                left = Math.min(364, left);
                car.css("left", left + "px");

                car.css({ WebkitTransform: 'rotate(' + 10 + 'deg)' });
            }

            if (arrow == 40) {
                let top = parseInt(car.css('top'));
                top += carMoveSpeed;
                top = Math.min(678, top);
                car.css("top", top + "px");

                car.css({ WebkitTransform: 'rotate(' + 0 + 'deg)' });
            }
        }

        function newEnemy() {
            let enemy = $("<div class='enemy'></div>");
            let left = Math.ceil((Math.random() * 27) * 10) + 84;
            enemy.css('left', left + "px");
            enemy.css('top', '-100px');
            container.append(enemy);
            autoDrive(enemy);
        }

        function autoDrive(acar) {
            if (timer != null) {
                let enemyTimer = setInterval(function() {
                    let top = parseInt(acar.css('top'));
                    if (top > 800) {
                        clearInterval(enemyTimer);
                        score++;
                        $('#score').text("Score:" + score);
                        acar.remove();
                    }
                    if (crash == 0) {
                        top += enemyMoveSpeed;
                        acar.css('top', top + "px");
                    };
                }, enemySpeedTime);
            }
        }
    }

});